<template>
  <div class="container"
       v-title
       data-title='我的报备'>
    <div class="fixed-header clearfix">
      <div class="header-half bor-r">
        <select v-model="params.customerStatus">
          <option value="">报备状态</option>
          <option v-for="(row,index) in customerArray"
                  v-bind:value="index"
                  :key="index">{{row}}</option>
        </select>
        <i class="fa fa-angle-down"></i>
      </div>
      <div class="header-half"
           style="text-align: right">
        <img src="../../assets/images/addIcon.png"
             @click="addCustomer">
        <div class="searchTextIcon"
             @click="toSearch()"
             style="float:left">
          <div class="searchText"
               style="max-width: 28vw;">{{params.searchContent}}</div>
          <a href="javascript:;">
            <img src="../../assets/images/search.png">
          </a>
        </div>
      </div>
    </div>
    <ul class="report-list-view"
        ref="list"
        @touchstart="touchStart($event)"
        @touchend="touchEnd($event)">
      <li v-for="(row,index) in customerPremisesList"
          :key="index">
        <router-link :to="{name:'declareDetail',params:{id:row.id}}">
          <div class="report-info-cell year-time-list">
            <div class="template-list-right">
              <div class="title">{{row.name}}</div>
              <div class="content">{{row.formatCreateTime}}</div>
            </div>
            <div class="report-list-details">
              <div class="report-phone">{{row.mobile}}</div>
              <div class="report-name">{{row.premisesName}}</div>
              <div class="report-state colA"
                   style="width:100px;">{{row.currentStatus}}</div>
            </div>
            <div class="report-list-details"
                 v-if="row.reward!=0">
              <div class="report-name">带看奖:</div>
              <div class="report-state colA">{{row.reward==0?"":row.reward}}元/次</div>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
    <div class="noMore"
         v-if="noMore">没有更多了</div>
    <!-- 弹出搜索层 -->
    <search-page v-show="modalShow"
                 v-on:child-tell='listenTo'
                 v-on:search-text='searchTo'
                 msgFrom="params.searchContent"></search-page>
    <!-- <mugen-scroll :handler="list"
                  :should-handle="!loading">
    </mugen-scroll> -->
  </div>
</template>
<script>
import MugenScroll from "vue-mugen-scroll";
import SearchPage from "./searchBar.vue";
import reportFailDialogOptions from "../../js/reportFailDialogOptions";
import Utils from "../../js/utils";
export default {
  data() {
    return {
      modalShow: false,
      tellWrods: "",
      params: {
        pageSize: 10,
        pageNo: 0,
        customerStatus: "",
        name: "",
        searchContent: ""
      },
      customerPremisesList: [],
      customerArray: [],
      loading: false,
      noMore: false,
      startX: 0,
      startY: 0
    };
  },
  watch: {
    "params.customerStatus": function (newValue, oldValue) {
      var _self = this;
      _self.customerPremisesList = [];
      _self.params.pageNo = 0;
      _self.params.customerStatus = newValue;
      _self.list();
    },
    "params.searchContent": function () {
      var _self = this;
      _self.customerPremisesList = [];
      _self.params.pageNo = 0;
      _self.list();
    }
  },
  components: {
    MugenScroll,
    SearchPage
  },
  mounted() {
    this.customerStatuList();
    this.list();
    $("#goble_menu_div").show();
  },
  methods: {
    touchStart(e) {
      this.startY = e.targetTouches[0].pageY;
      this.startX = e.targetTouches[0].pageX;
    },
    touchEnd(e) {
      let endX = e.changedTouches[0].pageX,
        endY = e.changedTouches[0].pageY,
        dy = this.startY - endY,
        dx = endX - this.startX;
      let listHeight = this.$refs.list.offsetHeight;
      console.log(dy, this.startY, listHeight - 500);
      if (
        endY < this.startY &&
        Math.abs(dy) > 20 &&
        this.startY > listHeight - 500 &&
        !this.noMore
      ) {
        this.list();
      }
    },
    list: function () {
      var _self = this;
      var index = layer.load();
      _self.loading = true;
      _self.params.pageNo = _self.params.pageNo + 1;
      _self.params.searchContent = _self.params.searchContent;
      var body = {};
      body.params = _self.params;
      var url = _self.utilHelper.apiUrl + "/api/getCPPage";
      _self.$http.post(url, body).then(
        (response) => {
          layer.close(index);
          var data = response.body;
          if (data.result == 1) {
            var result = response.body.resData.cpDtoPage;
            if (result && _self.params.pageNo > result.totalPages) {
              //   _self.loading = true;
              _self.noMore = true;
            } else {
              for (var i = 0; i < result.rows.length; i++) {
                _self.customerPremisesList.push(result.rows[i]);
              }
              //   _self.loading = false;
              _self.noMore = false;
            }
          } else if (data.result == -1) {
            this.$router.push({
              path: "/login"
            });
          }
        },
        (response) => {
          console.log(response);
        }
      );
    },
    customerStatuList: function () {
      var _self = this;
      var url = this.utilHelper.apiUrl + "/common/getEnum/CustomerStatusEnum";
      var body = {};
      body.params = {};
      var findStatusParams = {
        //过滤已带看、已认购、已签约
        flag: "2,3,4"
      };
      _self.$http.get(url, body).then(
        (response) => {
          _self.customerArray = response.body.data;
        },
        (response) => {
          console.log(response);
        }
      );
    },
    listenTo: function (msg) {
      this.modalShow = msg;
    },
    searchTo: function (msg) {
      this.params.searchContent = msg;
    },
    toSearch: function () {
      this.modalShow = true;
    },
    addCustomer() {
      const _this = this;
      //若为游客则弹出绑定对话框
      //if(!this.tourist()){
      if (Utils.tourist(Utils.getUserRole())) {
        reportFailDialogOptions.btn1 = function () {
          layer.close(index);
        };
        reportFailDialogOptions.btn2 = function () {
          _this.$router.push({ path: "/bindCompany" });
          layer.close(index);
          return;
        };
        var index = layer.open(reportFailDialogOptions);
        return;
      }
      this.$router.push({
        path: "/addCustomer"
      });
    }
  }
};
</script>
<style scoped>
.noMore {
  margin: 20px;
  text-align: center;
}
</style>
